/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles/tokens' as awsui;
@use '../internal/styles' as styles;

.root {
  @include styles.styles-reset;
  @include styles.text-wrapping;

  > .list {
    list-style: none;
    padding-inline-start: 0;
    margin-block: 0;

    > .container {
      display: grid;
      grid-template-columns: awsui.$space-static-l 1fr;
      grid-template-rows: minmax(awsui.$space-static-l, auto);

      > .header {
        display: flex;
        gap: awsui.$space-xxs;
        grid-row: 1;
        grid-column: 1 / span 2;
      }

      > .details {
        align-items: center;
        grid-row: 2;
        grid-column: 2;
        margin-block-end: awsui.$space-static-xs;
      }

      > .connector {
        grid-row: 2;
        grid-column: 1;
        background-color: awsui.$color-border-divider-default;
        margin-block: 0;
        border-block: 0;
        border-inline: 0;
        inline-size: awsui.$border-divider-list-width;
        block-size: auto;
        min-block-size: awsui.$space-static-xs;
        position: relative;
        inset-inline-end: awsui.$space-static-xxxs;
      }
    }

    > :last-of-type > .connector {
      display: none;
    }

    &.custom > .details {
      // Remove built-in margins for custom rendering for maximum flexibility
      margin-block-end: 0;
    }
  }
}

.horizontal {
  > .list {
    display: grid;
    align-items: flex-start;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;

    > .container {
      display: grid;
      grid-template-columns: awsui.$space-static-l 1fr;
      grid-template-rows: minmax(awsui.$space-static-l, auto);
      align-items: center;

      > .header {
        display: flex;
        grid-row: 1;
        grid-column: 1 / span 2;
        align-items: center;

        > .connector {
          display: block;
          flex: 1;
          background-color: awsui.$color-border-divider-default;
          margin-block: 0;
          border-block: 0;
          border-inline: 0;
          min-block-size: 0;
          inset-inline-end: 0;

          block-size: awsui.$border-divider-list-width;
          inline-size: auto;
          min-inline-size: awsui.$space-static-xs;
          margin-inline-end: awsui.$space-static-xxs;
        }
      }

      > .horizontal-header {
        grid-row: 2;
        grid-column: 1 / span 3;
      }

      > .details {
        grid-row: 3;
        grid-column: 1 / span 3;
      }
    }

    > .container:last-child {
      > .header > .connector {
        display: none;
      }
    }
  }
}
